<template>
    <div class="w-table" style="height: calc(100% - 70px); width: 100%">
        <el-auto-resizer>
            <template #default="{ height, width }">
                <el-table-v2 :data="tableData" :cache="10" :width="width" :height="height" :header-cell-props="headerCellStyle" v-loading="loading" ref="tableRef" :columns="newTableConfig" />
            </template>
        </el-auto-resizer>
    </div>
</template>

<script setup lang="jsx">
import { ref, watch, onUnmounted, isRef, computed } from "vue";
import emitter from "@/bus";
const emits = defineEmits(["rowClick", "rowDblclick", "selectChange"]);
const props = defineProps({
    tableConfig: {
        type: Array,
        default: () => []
    },
    formData: {
        type: Object,
        default: () => ({})
    }
});
const newTableConfig = ref([]);
const selectionCell = (onChange, column, value) => {
    return <ElCheckbox onChange={onChange} modelValue={value} />;
};
watch(
    () => props.tableConfig,
    (newVal) => {
        newVal.unshift({
            key: "checked",
            width: 70,
            headerCellRenderer: (column) => selectionCell(onChange, column)
        });
        newTableConfig.value = newVal;
    },
    {
        immediate: true
    }
);
const tableData = ref([]);
const tableRef = ref(null);
const loading = ref(false);
const headerCellStyle = () => ({ color: "#8C8C8C", fontWeight: 400 });

defineExpose({
    tableData,
    tableRef
});
</script>

<style lang="less" scoped>
.w-table {
    box-sizing: border-box;
    padding: 0 0 15px 0;
    box-sizing: border-box;
}
</style>
